<template>
  <div class="view-container">
    <div class="main-content">
      <div class="list-container" style="padding-top: 0">
        <div class="my-tabs-container">
          <div class="my-tabs">
            <el-tabs v-model="activeName" style="width:100%">
              <el-tab-pane label="企业代理" name="potentialAgent" />
              <el-tab-pane label="兼职大包" name="signedAgent" />
            </el-tabs>

            <el-button class="main-btn"
              v-auth="{v: ['crm:baseInfo:agent:potentialAgent:create'],bool:activeName === 'potentialAgent'  }"
              size="small" type="primary" @click="handlNew">新建企业代理</el-button>

            <el-button class="main-btn"
              v-auth="{v: ['crm:baseInfo:agent:signedAgent:create'],bool:activeName === 'signedAgent' }" size="small"
              type="primary" @click="handlNew">新建兼职大包</el-button>
          </div>
        </div>
        <component :is="activeName" ref="refComponent" :type="type" />
      </div>
    </div>

  </div>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, reactive, toRefs,} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "Index",
  components: {
    potentialAgent: defineAsyncComponent(() =>
      import("../modules/potentialAgent.vue")
    ),
    signedAgent: defineAsyncComponent(() =>
      import("../modules/signedAgent.vue")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      activeName: "potentialAgent",
      type: "agent",
    });

    const handlNew = () => {
      if (data.activeName === "potentialAgent") {
        data.type = "agent";
      }
      if (data.activeName === "signedAgent") {
        data.type = "agent_person";
      }
      router.push({
        path: "/baseInfo/customer/baseInfoAgent/createAgent",
        query: { type: data.type },
      });
    };

    return {
      ...toRefs(data),
      handlNew,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
